<template>
  <div style="margin:20px;background:#fff;border-radius:10px;height:780px;overflow:auto;">
    
    <c-form ref="cform"
            :option='option'
            :initData='cacheData.init.form'
            :data='data.form'
            @change="change"
            @submit="submit">
    </c-form>
  </div>
</template>

<script>
import { ruleOperation,ruleListInfo } from '@/api/memorialHallConfig/rulesConfig'
export default {
  data(){
    return{
      cacheData:{
        init:{
          form:{
          },
        },
      },
      data:{
        form:{
        },
      },
      option:{
        labelWidth:'100px',
        submitBtn:true,
        reBackBtn:false,
        items:[
          {
            label:'出生文字描述',
            type:'textarea',
            key:'deadStart',
            placeholder:'请输入出生文字描述',
            maxLength:300,
            isCount:true,
            style:'width:100%;',
          },
          {
            label:'过世文字描述',
            type:'textarea',
            key:'deadEnd',
            placeholder:'请输入过世文字描述',
            maxLength:300,
            isCount:true,
            style:'width:100%;',
          },
          {
            label:'海报',
            type:'img',
            key:'file',
            rules:[{
              required:true,
              message:'请上传图片',
              trigger:'change'
            }]
          },
        ],
      },
    }
  },
  created(){
    this.onLoad()
  },
  methods:{
    onLoad(){
      ruleListInfo({}).then(({data})=>{
        let { deadStart,deadEnd,posterUrl,id }=data
        this.cacheData.init.form={
          id,deadStart,deadEnd,file:posterUrl
        }
        this.$nextTick(()=>{
          this.$refs.cform.init()
        })
      })
    },
    submit(){//会有一个参数form
      let params={...this.data.form}
      ruleOperation(params).then(()=>{
        this.$message({
          type:'success',
          message:'提交成功'
        })
        this.onLoad()
      })
    },
    change(form){
      /**
       * 加新选择时需要先将下面这段注释,否则会引起递归调用
       */
      this.data.form=form
    },
    //设置data.form的某些值,不会改变其他值
    setData(obj){
      for(let key in obj){
        this.data.form[key]=obj[key]
      }
      this.data.form=Object.assign({},this.data.form)
    },
    //重新设置data.form,会删除其他值
    reSetData(obj){
      this.data.form=Object.assign({},obj)
    },
  },
}
</script>

<style lang='scss' scoped>

</style>